import React, { Component } from 'react'
// connect高阶组件，用于在组件中操作redux
//  + 参数1：把redux中的state数据映射到当前组件的this.props中
//    - 回调函数，回调函数要返回一个json对象
//  + 参数2：把定义的用来调用dispatch方法映射到this.props中
import { connect } from 'react-redux'

class App extends Component {
  render() {
    console.log('props', this.props)
    const { count, addCount } = this.props
    return (
      <div>
        <h3>count:{count}</h3>
        <button
          onClick={() => {
            addCount(10)
          }}
        >
          ++count++
        </button>
      </div>
    )
  }
}

// state就是redux中的state数据对象
// 把redux中state数据映射到当前的this.props对象中，返回的对象就是要映射的数据
const mapStateToProps = (state) => {
  // console.log(state)
  // return { count: state.count }
  return state
}

// 定义调用dispatch方法
// const mapDispatchToProps = (dispatch) => {
//   return {
//     addCount(n) {
//       dispatch({ type: 'add', payload: n })
//     }
//   }
// }
const mapDispatchToProps = {
  addCount(n) {
    return { type: 'add', payload: n }
  }
}

// export default connect((state) => state)(App)
export default connect(mapStateToProps, mapDispatchToProps)(App)
